<template>
  <div class="container">
    <div class="app-container">
      <el-card>
        <!-- 工具区域 -->
        <el-row type="flex" justify="space-between">
          <div>
            <el-button
              @click="$refs.addForm.isShow = true"
              type="primary"
              size="small"
              >添加角色</el-button
            >
          </div>
          <div>22</div>
        </el-row>
        <br />
        <!-- 表格区域 -->
        <el-table :data="list" border stripe>
          <el-table-column label="角色">
            <template slot-scope="{ row }">
              <el-input
                v-model="row.editData.name"
                v-if="row.isEdit"
                size="small"
                type="text"
              />
              <span v-else> {{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="启用">
            <template slot-scope="{ row }">
              <el-switch
                v-model="row.editData.state"
                :active-value="1"
                :inactive-value="0"
                v-if="row.isEdit"
              ></el-switch>
              <span v-else>{{ row.state * 1 === 1 ? "启用" : "禁用" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="描述">
            <template slot-scope="{ row }">
              <el-input
                v-model="row.editData.description"
                v-if="row.isEdit"
                size="small"
                type="textarea"
              />
              <span v-else>{{ row.description }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <template v-if="row.isEdit">
                <el-button
                  @click="editSubmit(row.editData)"
                  type="primary"
                  size="small"
                  >确定</el-button
                >
                <el-button @click="row.isEdit = false" plain size="small"
                  >取消</el-button
                >
              </template>
              <template v-else>
                <el-button type="text">分配权限</el-button>
                <el-button style="margin-right:10px;" @click="row.isEdit = true" type="text">编辑</el-button>
                <el-popconfirm @confirm="delRow(row.id)"  title="这是一段内容确定删除吗？">
                  <el-button type="text" slot="reference">删除</el-button>
                </el-popconfirm>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination
          @current-change="currentChange"
          :current-page.sync="queryData.page"
          :page-size="queryData.pagesize"
          layout="prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </el-card>
    </div>
    <addForm @updateList="initData" ref="addForm" />
  </div>
</template>
<script>
import addForm from "./components/addForm.vue";
import { delRoleInfoApi, editRoleApi, getRoleListApi } from "@/api/role";
export default {
  name: "Role",
  components: { addForm },
  data() {
    return {
      // 列表数据
      list: [],
      // 列表的查询参数
      queryData: {
        page: 1,
        pagesize: 4,
      },
      // 总数
      total: 0,
    };
  },
  created() {
    this.initData();
  },
  methods: {
    // 获取角色列表数据
    async initData() {
      // 1. 发起网络请求
      let { rows, total } = await getRoleListApi(this.queryData);
      // 2. 数据加工处理
      // (增加一个isEdit字段，用于判断是否需处于编辑状态)
      // (增加一个editData字段，用于绑定修改的表单控件)
      rows = rows.map((item) => {
        item.editData = { ...item };
        item.isEdit = false;
        return item;
      });
      // 3. 赋值变量
      this.list = rows;
      this.total = total;
      // this.list = this.list.map((item) => {
      //   // item.isEdit = false;  // 不可以的！ 数据没有响应式
      //   this.$set(item, 'isEdit',false)
      //   return item;
      // });
      // console.log(this.list);
    },
    // 页码更换事件
    currentChange(val) {
      // val就是最新页码
      this.queryData.page = val;
      // 再次获取列表数据
      this.initData();
    },
    // 修改数据
    async editSubmit(val) {
      // 1. 校验功能
      if (!val.name || !val.description)
        return this.$message.warning("请输入完整内容");
      // 2. 发起网络请求
      await editRoleApi(val);
      // 3. 提示成功
      this.$message.success("操作成功");
      // 4. 关闭编辑状态
      // 5. 列表更新
      this.initData();
    },
    // 删除事件
    async  delRow(id){
      // 1. 发起删除网络请求
      await delRoleInfoApi(id)
      // 2. 提示成功
      this.$message.success('删除成功')
      // 3. 边缘处理
      if(this.queryData.page > 1 && this.list.length === 1){
        this.queryData.page--
      }
      // 4. 列表更新
       this.initData()
    }
  },
};
</script>
